<template>
  <div>
    <el-group-title class="ccui-group-wrapper d_jump" index="contract">
      <template slot="groupTitle">
        <el-form
          :model="form"
          :rules="rules"
          ref="form2"
          label-width="160px"
          class="ccui-form"
          style="overflow: visible"
        >
          <div class="extend-btn">
            <el-upload
              :show-file-list="false"
              :action="uploadUrl"
              class="upload-demo tow"
              :before-upload="beforeAvatarUpload"
              :on-success="onSuccess"
              :on-progress="onProgress"
              :on-error="onError"
              :headers="headers"
              ref="uploadItem"
              multiple
            >
              <el-button
                plain
                type="single-number"
                v-if="typeDetail !== 'detail'"
                >上传附件
              </el-button>
            </el-upload>
          </div>
          <el-table
            :data="tableData"
            style="margin-bottom: 20px; width: 100%"
            border
            max-height="99999"
            class="ccui-form-child-table"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="序号"
              type="index"
              min-width="20%"
              height="36px"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileName"
              label="附件名称"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileSize"
              label="附件大小"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="createTime"
              label="上传时间"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="scaleNum"
              label="操作"
              align="center"
              header-align="center"
              appendixInfor.vue
              min-width="70%"
            >
              <template slot-scope="scope">
                <span
                  style="color: #0089ef; cursor: pointer"
                  @click="deleteAppend(scope.$index)"
                  v-if="typeDetail !== 'detail'"
                  >删除</span
                >
                <span
                  style="color: #0089ef; cursor: pointer"
                  @click="download(scope.$index, scope.row)"
                  v-if="typeDetail === 'detail'"
                  >下载</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
import { mapGetters } from "vuex";

export default {
  name: "attachment",
  props: {
    typeDetail: String,
    tableData: Array
  },
  data() {
    return {
      form: {
        fileName: "", //合同附件里的文件名称
        fileSize: "", //合同附件里的文件大小
        createTime: "", // 合同附件里的上传时间
        fileArr: [] // 入参
      },
      uploadIds: [],
      rules: {},
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || ""
      }
    };
  },
  created() {
    // let storeAppend = JSON.parse(sessionStorage.getItem("addAppendList"));
    // console.log(JSON.parse(sessionStorage.getItem("addAppendList")));
    // this.tableData = storeAppend != null ? storeAppend : [];
    // if (storeAppend === null) return;
    // storeAppend.forEach(item => {
    //   this.form.fileArr.push(item.uploadIds);
    // });
  },
  methods: {
    onProgress() {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    onSuccess(res) {
      this.$message.success("附件上传成功");
      this.uploadLoading.close();
      let fileData = res.data[0];
      this.tableData.push({
        uploadId: fileData.uploadId,
        fileName: fileData.fileName,
        fileSize: Math.round(fileData.fileSize / 1024) + "kb",
        createTime: fileData.createTime
      });
      this.form.fileArr = [];
      this.uploadIds = [];
      this.tableData.forEach(item => {
        this.form.fileArr.push(item.uploadId);
        this.uploadIds.push(item.uploadId);
      });
      this.uploadLoading.close();
      // sessionStorage.setItem("addAppendList", JSON.stringify(this.tableData));
    },
    onError() {
      this.uploadLoading.close();
    },
    beforeAvatarUpload(file) {
      const isLt50 = file.size < 52428800;
      var testmsg = file.name.substring(file.name.lastIndexOf("."));
      let fileType = this.getUploadFileRules.includes(testmsg);
      if (!isLt50) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true,
        //   duration: 0
        // });
        this.$showErrorMessage("文件大小不超过50M!")
      }
      if (!fileType) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true,
        //   duration: 0
        // });
        this.$showErrorMessage("上传文件格式错误")
      }
      return isLt50 && fileType;
    },
    deleteAppend(index) {
      this.tableData.splice(index, 1);
      this.$refs.uploadItem.uploadFiles.splice(index, 1);
      this.form.fileArr = [];
      this.uploadIds = [];
      this.tableData.forEach(item => {
        this.form.fileArr.push(item.uploadId);
        this.uploadIds.push(item.uploadId);
      });
      // sessionStorage.setItem("addAppendList", JSON.stringify(this.tableData));
    },
    download(i, r) {
      let openUrl = document.createElement("a");
      openUrl.style.display = "none";
      openUrl.href = `${addUrlPerFix(
        process.env.VUE_APP_BASE_URL
      )}/apis/gepma/oss/downloadByUploadId?uploadId=${r.fileInfoId}`;
      openUrl.setAttribute("download", r.fileName);
      document.body.appendChild(openUrl);
      openUrl.click();
    }
  },
  computed: {
    ...mapGetters(["getUploadFileRules"])
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-table {
  /deep/ th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }

  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
